<template>
  <div class="dy-main">
    <div class="dy-header">
      <x-header :left-options="{backText: ''}">信用卡还款</x-header>
    </div>
    <div class="dy-body">
      <div class="dy-wapper">
          <div class="scroller-box">
            <div style="margin-top:20px; padding:0 0.2rem;">
              <zx-button type="tab" :data="['快速还款', '自动还款设置']" @on-click="changBar"></zx-button>
            </div>
            <!-- 快速还款 -->
            <div v-if="quickRepayment">
              <group label-width="2rem">
                <popup-picker popup-title="还款卡号" title="还款卡号：" value-text-align="left" :data="list1" v-model="value1_1" @on-show="onShow" @on-hide="onHide" @on-change="onChange"></popup-picker>
                <cell title="别名：" :value="test1" value-align="left"></cell>
                <cell title="余额：" :value="test2" value-align="left"></cell>
              </group>
              <group label-width="2rem">
                <popup-picker popup-title="转入卡号" title="转入卡号：" value-text-align="left" :data="list1" v-model="value1_1" @on-show="onShow" @on-hide="onHide" @on-change="onChange"></popup-picker>
                <cell title="币种：" :value="test3" value-align="left"></cell>
              </group>
              <group label-width="2rem">
                <popup-picker popup-title="还款方式" title="还款方式：" value-text-align="left" :data="list1" v-model="value1_2" @on-show="onShow" @on-hide="onHide" @on-change="onChange"></popup-picker>
                <cell title="还款金额：" value-align="left" align-items="flex-start">
                  <div>
                    <div style="color: green">100.00</div>
                    <div style="color: red">壹佰元整</div>
                  </div>
                </cell>
              </group>
              <group label-width="2rem">
                <x-input title="交易密码：" type="password" placeholder="必填"></x-input>
              </group>

              <div style="margin-top:20px; padding:0 0.8rem;">
                <x-button type="primary">确定</x-button>
              </div>
            </div>
            <!-- 自动还款设置 -->
            <div v-else>
              <group label-width="2rem">
                <cell value-align="left" align-items="flex-start">
                  <div>
                    <div style="color: black">广发DIY卡(6146)</div>
                    <div>账单日 每月6日</div>
                    <div>还款到期日 2018-05-26</div>
                    <div>卡片币种 人民币</div>
                  </div>
                </cell>
              </group>
              <group label-width="2rem">
                <popup-picker popup-title="转出账户" title="转出账户：" value-text-align="left" :data="list1" v-model="value1_1" @on-show="onShow" @on-hide="onHide" @on-change="onChange"></popup-picker>
                <popup-picker popup-title="转出币种" title="转出币种：" value-text-align="left" :data="list1" v-model="value1_3" @on-show="onShow" @on-hide="onHide" @on-change="onChange"></popup-picker>
              </group>
              <group label-width="2rem">
                <popup-picker popup-title="还款方式" title="还款方式：" value-text-align="left" :data="list1" v-model="value1_4" @on-show="onShow" @on-hide="onHide" @on-change="onChange"></popup-picker>
              </group>
              <div style="margin-top:20px; padding:0 0.8rem;">
                <x-button type="primary">确定</x-button>
              </div>
            </div>
          </div>
      </div>
    </div>
    <div class="dy-footer"></div>
  </div>
</template>

<script>
export default {
  mounted () {
    setTimeout(() => {
      this.money = -1024;
    }, 2000);
  },
  data () {
    return {
      quickRepayment: true,
      test1: '9136',
      test2: '0.00',
      test3: '人民币',
      money: null,
      title1: '选择银行卡',
      list1: [['6234 **** **** ***6 345', '6234 **** ***6 345', '6234 **** **** ***6 345', '6234 **** **** ***6 345', '6234 **** **** ***6 345', '6234 **** **** ***6 345']],
      value1_1: ['6234 **** **** ***6 345'],
      value1_2: ['手动录入'], // 下拉框选择样式二
      value1_3: ['人民币'],
      value1_4: ['全额还款'],
      show2: false, // 下拉框二 是否出现
      hourListValue: '', // 时间
      userPas: '', // 验证码
      codeText: '发送验证码', // 验证按钮显示内容
      codeTime: 10, // 验证码倒计时
      isTime: null, // 验证码状态
      disableCode: false,
      radioVal: '',
      checkVal: [],
      havImg: ''
    }
  },
  computed: {
    theQuery () {
      return this.$router.query.name
    }
  },
  methods: {
    changBar (val) {
      val === 0 ? this.quickRepayment = true : this.quickRepayment = false
    },
    back () {
      this.$publicFun.goBack(this)
    },
    onShow () {

    },
    onHide (type) {},
    onChange (val) {},
    showDropdown () {
      this.show2 = true
    },
    timeChange (val) {

    },
    testYzm () {
    },
    radioChange (val) {
      this.radioVal = val
      console.log(val)
    },
    checkChange (val) {
      this.checkVal = val
    },
    gotoss () {
      this.$bridge.callhandler('openWeb', {'url': 'cellDemo', 'closeCurrUI': 'false'}, (response) => {})
    }
  },
  watch: {
    'value1_1': function (val) {
      console.log(val)
    }
  },
}
</script>
<style scoped>
/deep/ .weui-cell_access .weui-cell__ft:after {
    content: " ";
    border-color: #0080FF;
    transform: rotate(135deg);
}
/deep/ .vux-header .vux-header-left .left-arrow:before {
    content: "";
    border: 1px solid #0080FF;
    border-width: 2px 0 0 2px;
}
/deep/ .vux-header .vux-header-title {
    font-weight: 400;
    color:#000;

}
</style>
